<template>
    <div class="wrap">
        <div class="title">
            <p>系统设置</p>
        </div>
        <div class="page_con">
            <el-form ref="elForm"
                     :model="formData"
                     style="width:1000px"
                     label-width="100px"
                     label-position="top">
                <el-form-item label="开启用户注册">
                    <el-switch v-model="formData.register_status"
                               active-value="1"
                               inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="允许购买商品">
                    <el-switch v-model="formData.pay_status"
                               active-value="1"
                               inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="公告内容">
                    <el-input type="textarea"
                              v-model="formData.notice_content"></el-input>
                </el-form-item>

                <el-form-item label="展示时间"
                              style="width:500px">
                    <el-date-picker v-model="searchTime"
                                    @change="datePickerChange"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期" />
                </el-form-item>
                <el-form-item label="通知方式">
                    <el-radio-group v-model="formData.notice_type">
                        <el-radio value="1">Message</el-radio>
                        <el-radio value="2">MessageBox</el-radio>
                        <el-radio value="3">Notification</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="通知状态">
                    <el-switch v-model="formData.notice_status"
                               active-value="1"
                               inactive-value="0"></el-switch>
                </el-form-item>

                <el-form-item label="解析间隔">
                    <span class="gray">如果最近：</span>
                    <el-input-number v-model="formData.minutes"
                                     style="margin-right:10px"
                                     :min="1"
                                     :max="60"
                                     label="请介于1~60之间">
                    </el-input-number>
                    <span class="gray">分钟内下载成功数超过：</span>
                    <el-input-number v-model="formData.number"
                                     style="margin-right:10px"
                                     :min="1"
                                     :max="100"
                                     label="请介于1~100之间">
                    </el-input-number>
                    <span class="gray">个则等待</span>
                </el-form-item>
                <el-form-item label="用户登录过期时间">
                    <el-input-number v-model="formData.user_token_express_time"
                                     :min="1"
                                     :max="168"
                                     label="小时数，请介于1~168之间">
                    </el-input-number>
                    <span class="gray">小时后需要重新登陆</span>
                </el-form-item>
                <el-form-item label="cookie解析间隔">
                    <el-input-number v-model="formData.cookie_parse_space"
                                     :min="1"
                                     :max="30"
                                     label="秒数，请介于1~30之间">
                    </el-input-number>
                </el-form-item>
                <p class="form_title">用户端地址</p>
                <el-form-item label="用户端地址">
                    <el-input v-model="formData.user_url"></el-input>
                </el-form-item>
                <p class="form_title">淘宝续费商品链接</p>
                <el-form-item label="淘宝续费商品链接">
                    <el-input v-model="formData.taobao_url"></el-input>
                </el-form-item>
                <p class="form_title">缓存库配置</p>
                <el-form-item label="缓存库接口地址">
                    <el-input v-model="formData.cache_api_url"></el-input>
                </el-form-item>
                <el-form-item label="缓存库接appkey">
                    <el-input v-model="formData.cache_appkey"></el-input>
                </el-form-item>
                <p class="form_title">三方接口配置</p>
                <el-form-item label="三方接口地址">
                    <el-input v-model="formData.api_url"></el-input>
                </el-form-item>
                <el-form-item label="三方秘钥">
                    <el-input v-model="formData.api_key"></el-input>
                </el-form-item>
                <p class="form_title">微信支付配置，勿动</p>
                <el-form-item label="微信支付商户号">
                    <el-input v-model="formData.mch_id"></el-input>
                </el-form-item>
                <el-form-item label="微信支付商户密钥">
                    <el-input v-model="formData.mch_key"></el-input>
                </el-form-item>
                <el-form-item label="微信支付通知回调地址">
                    <el-input v-model="formData.notify_url"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               @click="submitForm">提交</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script setup>
import { ElLoading } from 'element-plus'
import { ref, reactive, inject, onMounted } from 'vue'
const http = inject('http')
const searchTime = ref('')
const formData = ref({
    register_status: 0,
    pay_status: 0,
    notice_begintime: null,
    notice_endtime: null,
    notice_content: '',
    notice_type: '1',
    notice_status: '1',
    minutes: 60,
    number: 5,
    cookie_parse_space: 30,
    user_token_express_time: 24,
    user_url: '',
    taobao_url: '',
    cache_api_url: '',
    cache_appkey: '',
    api_url: '',
    api_key: '',
    mch_id: '',
    mch_key: '',
    notify_url: '',
})

function datePickerChange (data) {
    console.log(data);
    if (data) {
        formData.value.notice_begintime = Math.floor(new Date(searchTime.value[0]).getTime() / 1000)
        formData.value.notice_endtime = Math.floor(new Date(searchTime.value[1]).getTime() / 1000)
    } else {
        formData.value.notice_begintime = null
        formData.value.notice_endtime = null
    }
    console.log(formData.value);
}


const submitForm = () => {
    http.post(BASE_URL + '/admin/sys/save', formData.value)
}
const get_list = () => {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    http.get(BASE_URL + '/admin/sys/get').then(res => {
        if (res.code == 200) {
            formData.value = res.data
            searchTime.value = []
            searchTime.value.push(res.data.notice_begintime * 1000, res.data.notice_endtime * 1000)
            if (res.data.user_url) {
                localStorage.setItem('user_url', res.data.user_url)
            }
        }
    }).finally(() => {
        loading.close()
    })
}

onMounted(() => {
    
})
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.form_title {
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 40px;
}
.gray {
    color: #999;
}
</style>